<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <style>
      html,
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .swiper {
        width: 800px;
        height: 500px;
        overflow: hidden;
        margin: 50px auto;
        position: relative;
        border: 1px solid #ccc;
      }

      .swiper_container {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        transition: 1s;
      }

      .swiper_container li {
        flex: 1;
        font-size: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .swiper_button_prev,
      .swiper_button_next {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 5px solid #007aff;
        border-color: #007aff #007aff transparent transparent;
        top: 50%;
        transform: translateY(-50%) rotate(-135deg);
      }

      .swiper_button_prev {
        border-color: #007aff #007aff transparent transparent;
        left: 10px;
      }

      .swiper_button_next {
        border-color: transparent transparent #007aff #007aff;
        right: 10px;
      }

      .swiper_pagination {
        display: flex;
        position: absolute;
        bottom: 20px;
        left: 20%;
      }

      .swiper_pagination li {
        width: 7px;
        height: 7px;
        background-color: #ccc;
        border-radius: 50%;
        border: 2px solid rgba(0, 0, 0, 0.2);
        margin-right: 4px;
      }

      .swiper_pagination li.active {
        background-color: #007aff;
        border-color: #4ecf63;
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <ul class="swiper_container"></ul>
      <ul class="swiper_pagination"></ul>
      <div class="swiper_button_prev"></div>
      <div class="swiper_button_next"></div>
    </div>

    <script>
      const swiper_container = document.querySelector('.swiper_container')
      const swiper_pagination = document.querySelector('.swiper_pagination')
      const swiper_button_prev = document.querySelector('.swiper_button_prev')
      const swiper_button_next = document.querySelector('.swiper_button_next')

      const swiper_items_list = []
      const pages_list = []

      let i
      for (i = 0; i <= 4; i++) {
        swiper_items_list.push(`<li>轮播图${i + 1}</li>`)
        pages_list.push(`<li ${!i ? 'class="active"' : ''} data-index="${i}"></li>`)
      }
      swiper_container.style.width = `${i * 100}%`
      swiper_container.innerHTML = swiper_items_list.join('')
      swiper_pagination.innerHTML = pages_list.join('')

      function setSwiperActive(num) {
        document.querySelector('.active').classList.remove('active')
        swiper_container.style.left = `${-num * 100}%`
        swiper_pagination.children[num].classList.add('active')
      }

      let num = 0,
        timer

      function nextSwiper() {
        num++
        let flag = false
        if (num > i - 1) {
          num = 0
          swiper_container.style.display = 'none'
          flag = true
        }
        setSwiperActive(num)
        if (flag) {
          setTimeout(() => {
            swiper_container.style.display = 'flex'
          })
        }
      }

      function setAutoSwiper() {
        timer = setInterval(nextSwiper, 3000)
      }

      setAutoSwiper()

      swiper_button_next.addEventListener('click', () => {
        clearInterval(timer)
        nextSwiper()
        setAutoSwiper()
      })

      swiper_button_prev.addEventListener('click', () => {
        clearInterval(timer)
        num--
        let flag = false
        if (num < 0) {
          num = i - 1
          swiper_container.style.display = 'none'
          flag = true
        }
        setSwiperActive(num)
        if (flag) {
          setTimeout(() => {
            swiper_container.style.display = 'flex'
          }, 200)
        }
        setAutoSwiper()
      })

      swiper_pagination.addEventListener('mouseover', function (e) {
        clearInterval(timer)
        const li = e.target
        if (li.tagName === 'LI') {
          num = li.dataset.index
          setSwiperActive(num)
        }
      })
      swiper_pagination.addEventListener('mouseout', function (e) {
        setAutoSwiper()
      })
    </script>
  </body>
</html>
